<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>账单详情 - 记账助手</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <style>
        body {
            background-color: #f8f9fa;
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
            color: #333;
            margin: 0;
            padding: 0;
        }
        
        .screen {
            max-width: 500px;
            margin: 0 auto;
            background: white;
            min-height: 100vh;
            position: relative;
            padding-bottom: 60px;
        }
        
        .bill-detail-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 15px 20px;
            display: flex;
            align-items: center;
            position: relative;
        }
        
        .back-btn {
            background: none;
            border: none;
            color: white;
            font-size: 24px;
            cursor: pointer;
            padding: 0;
            margin-right: 15px;
        }
        
        .bill-detail-title {
            font-size: 18px;
            font-weight: 600;
            margin: 0;
        }
        
        .bill-detail-container {
            padding: 20px;
        }
        
        .bill-card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            padding: 20px;
            margin-bottom: 20px;
        }
        
        .bill-header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .bill-category-icon {
            width: 40px;
            height: 40px;
            background-color: #f0f5ff;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            margin-right: 15px;
        }
        
        .bill-info {
            flex: 1;
        }
        
        .bill-category {
            font-size: 16px;
            font-weight: 600;
            color: #333;
        }
        
        .bill-subcategory {
            font-size: 14px;
            color: #666;
            margin-top: 2px;
        }
        
        .bill-amount {
            font-size: 18px;
            font-weight: 700;
        }
        
        .bill-amount.expense {
            color: #e74c3c;
        }
        
        .bill-amount.income {
            color: #2ecc71;
        }
        
        .bill-details {
            margin-bottom: 20px;
        }
        
        .bill-detail-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 12px;
        }
        
        .bill-detail-label {
            color: #666;
            font-size: 14px;
        }
        
        .bill-detail-value {
            color: #333;
            font-size: 14px;
            font-weight: 500;
            text-align: right;
        }
        
        .bill-note {
            background-color: #f9f9f9;
            border-radius: 8px;
            padding: 12px 15px;
            margin-bottom: 20px;
        }
        
        .bill-note-title {
            font-size: 14px;
            color: #666;
            margin-bottom: 5px;
        }
        
        .bill-note-content {
            font-size: 14px;
            color: #333;
        }
        
        .bill-actions {
            display: flex;
            justify-content: space-between;
        }
        
        .bill-action-btn {
            flex: 1;
            text-align: center;
            padding: 10px 0;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
        }
        
        .btn-edit {
            background-color: #f0f5ff;
            color: #667eea;
            margin-right: 10px;
        }
        
        .btn-delete {
            background-color: #fff0f0;
            color: #e74c3c;
        }
        
        .ai-input-section {
            margin-bottom: 60px;
        }
        
        .section-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 15px;
            color: #333;
        }
        
        .ai-input-card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            padding: 20px;
            margin-bottom: 20px;
        }
        
        .ai-input-header {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .ai-input-icon {
            width: 30px;
            height: 30px;
            background-color: #f0f5ff;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            margin-right: 10px;
        }
        
        .ai-input-title {
            font-size: 15px;
            font-weight: 600;
            color: #333;
        }
        
        .voice-input-container {
            background-color: #f0f5ff;
            border-radius: 10px;
            padding: 15px;
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .voice-input-text {
            flex: 1;
            font-size: 14px;
            color: #333;
        }
        
        .voice-input-icon {
            width: 30px;
            height: 30px;
            background-color: #667eea;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 14px;
        }
        
        .ai-recognition-result {
            background-color: #f9f9f9;
            border-radius: 10px;
            padding: 15px;
        }
        
        .image-container {
            margin: 15px 0;
        }
        
        .bill-image {
            width: 100%;
            border-radius: 10px;
            overflow: hidden;
            margin-bottom: 10px;
        }
        
        .bill-image img {
            width: 100%;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        
        .image-caption {
            text-align: center;
            font-size: 12px;
            color: #666;
        }
        
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            display: flex;
            justify-content: space-around;
            padding: 10px 0;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
            max-width: 500px;
            margin: 0 auto;
            z-index: 100;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 12px;
            color: #666;
            cursor: pointer;
        }
        
        .nav-item.active {
            color: #667eea;
        }
        
        .nav-icon {
            font-size: 20px;
            margin-bottom: 4px;
        }
        
        #quick-record-btn .nav-icon {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            margin-top: -20px;
            box-shadow: 0 4px 10px rgba(102, 126, 234, 0.3);
        }
        
        /* 一句话记账弹窗样式 */
        .quick-record {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            padding: 20px;
            border-radius: 20px 20px 0 0;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            transform: translateY(100%);
            transition: transform 0.3s ease;
            max-width: 500px;
            margin: 0 auto;
        }
        
        .quick-record.show {
            transform: translateY(0);
        }
        
        .quick-record-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .quick-record-title {
            font-size: 16px;
            font-weight: 600;
        }
        
        .close-btn {
            font-size: 18px;
            cursor: pointer;
        }
        
        .voice-input {
            display: flex;
            align-items: center;
            background-color: #f0f5ff;
            border-radius: 10px;
            padding: 5px 15px;
            margin-bottom: 20px;
        }
        
        .voice-input-field {
            flex: 1;
            border: none;
            background: transparent;
            padding: 10px 0;
            font-size: 14px;
            outline: none;
        }
        
        .mic-btn {
            width: 36px;
            height: 36px;
            background-color: #667eea;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 16px;
            cursor: pointer;
        }
        
        .upload-divider {
            text-align: center;
            margin: 20px 0;
            position: relative;
        }
        
        .upload-divider::before,
        .upload-divider::after {
            content: '';
            position: absolute;
            top: 50%;
            width: 40%;
            height: 1px;
            background-color: #e0e0e0;
        }
        
        .upload-divider::before {
            left: 0;
        }
        
        .upload-divider::after {
            right: 0;
        }
        
        .upload-divider span {
            background-color: white;
            padding: 0 10px;
            position: relative;
            z-index: 1;
            color: #666;
        }
        
        .image-upload-area {
            border: 2px dashed #d0d0d0;
            border-radius: 10px;
            padding: 20px;
            text-align: center;
            margin-bottom: 20px;
            cursor: pointer;
        }
        
        .upload-icon {
            font-size: 24px;
            margin-bottom: 10px;
        }
        
        .upload-text {
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 5px;
        }
        
        .upload-hint {
            font-size: 12px;
            color: #666;
        }
        
        .image-preview {
            position: relative;
            margin-bottom: 20px;
        }
        
        .image-preview img {
            width: 100%;
            border-radius: 10px;
        }
        
        .image-actions {
            position: absolute;
            top: 10px;
            right: 10px;
            display: flex;
            gap: 10px;
        }
        
        .btn-icon {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.8);
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            cursor: pointer;
        }
        
        .btn {
            width: 100%;
            padding: 12px 0;
            border-radius: 10px;
            font-size: 15px;
            font-weight: 500;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
        }
        
        /* 记账人头像样式 */
        .recorder-avatar {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #f0f5ff;
            margin-right: 10px;
            object-fit: cover;
            border: 2px solid #667eea;
        }
        
        .bill-detail-item.with-avatar {
            display: flex;
            align-items: center;
        }
        
        .bill-detail-item.with-avatar .bill-detail-value {
            display: flex;
            align-items: center;
        }
    </style>
</head>
<body>
    <div class="screen">
        <!-- 页面头部 -->
        <div class="bill-detail-header">
            <button class="back-btn" onclick="history.back()">
                ‹
            </button>
            <h1 class="bill-detail-title">账单详情</h1>
        </div>
        
        <!-- 主要内容 -->
        <div class="bill-detail-container">
            <!-- 账单信息卡片 -->
            <div class="bill-card">
                <div class="bill-header">
                    <div class="bill-category-icon" id="category-icon">🍔</div>
                    <div class="bill-info">
                        <div class="bill-category" id="bill-category">餐饮</div>
                        <div class="bill-subcategory" id="bill-subcategory">三餐</div>
                    </div>
                    <div class="bill-amount expense" id="bill-amount">-45.00</div>
                </div>
                
                <div class="bill-details">
                    <div class="bill-detail-item with-avatar">
                        <div class="bill-detail-label">记账人</div>
                        <div class="bill-detail-value">
                            <img src="https://via.placeholder.com/30x30/667eea/ffffff?text=用户" class="recorder-avatar" id="recorder-avatar">
                            <span id="bill-recorder">默认用户</span>
                        </div>
                    </div>
                    <div class="bill-detail-item">
                        <div class="bill-detail-label">账单时间</div>
                        <div class="bill-detail-value" id="bill-time">2024-05-28 12:30</div>
                    </div>
                    <div class="bill-detail-item">
                        <div class="bill-detail-label">账本</div>
                        <div class="bill-detail-value" id="bill-book">默认账本</div>
                    </div>
                    <div class="bill-detail-item">
                        <div class="bill-detail-label">支付方式</div>
                        <div class="bill-detail-value" id="bill-payment">支付宝</div>
                    </div>
                </div>
                
                <div class="bill-note">
                    <div class="bill-note-title">备注</div>
                    <div class="bill-note-content" id="bill-note">午餐费用</div>
                </div>
                
                <div class="bill-actions">
                    <div class="bill-action-btn btn-edit" id="edit-bill-btn">编辑</div>
                    <div class="bill-action-btn btn-delete" id="delete-bill-btn">删除</div>
                </div>
            </div>
            
            <!-- AI输入内容区域 -->
            <div class="ai-input-section">
                <div class="section-title">AI记账信息</div>
                
                <div class="ai-input-card">
                    <div class="ai-input-header">
                        <div class="ai-input-icon">🎤</div>
                        <div class="ai-input-title">一句话记账</div>
                    </div>
                    
                    <div class="voice-input-container">
                        <div class="voice-input-text" id="voice-input-text">今天午餐花了45元</div>
                        <div class="voice-input-icon">🎤</div>
                    </div>
                    
                    <div class="ai-recognition-result">
                        <div class="bill-detail-item">
                            <div class="bill-detail-label">识别类型</div>
                            <div class="bill-detail-value">支出</div>
                        </div>
                        <div class="bill-detail-item">
                            <div class="bill-detail-label">识别金额</div>
                            <div class="bill-detail-value">45.00元</div>
                        </div>
                        <div class="bill-detail-item">
                            <div class="bill-detail-label">识别分类</div>
                            <div class="bill-detail-value">餐饮 - 三餐</div>
                        </div>
                    </div>
                </div>
                
                <!-- 图片上传区域 -->
                <div class="ai-input-card" id="image-recognition-card" style="display: none;">
                    <div class="ai-input-header">
                        <div class="ai-input-icon">📷</div>
                        <div class="ai-input-title">票据识别</div>
                    </div>
                    
                    <div class="image-container">
                        <div class="bill-image">
                            <img id="receipt-image" src="" alt="票据图片">
                        </div>
                        <div class="image-caption">上传的票据图片</div>
                    </div>
                    
                    <div class="ai-recognition-result">
                        <div class="bill-detail-item">
                            <div class="bill-detail-label">识别类型</div>
                            <div class="bill-detail-value">支出</div>
                        </div>
                        <div class="bill-detail-item">
                            <div class="bill-detail-label">识别金额</div>
                            <div class="bill-detail-value" id="image-amount">68.00元</div>
                        </div>
                        <div class="bill-detail-item">
                            <div class="bill-detail-label">识别分类</div>
                            <div class="bill-detail-value" id="image-category">购物 - 超市</div>
                        </div>
                        <div class="bill-detail-item">
                            <div class="bill-detail-label">识别内容</div>
                            <div class="bill-detail-value" id="image-content">牛奶、面包、水果</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 底部导航栏 -->
        <div class="bottom-nav">
            <div class="nav-item" data-page="index.html">
                <div class="nav-icon">🏠</div>
                <div>首页</div>
            </div>
            <div class="nav-item" data-page="statistics.html">
                <div class="nav-icon">📊</div>
                <div>统计</div>
            </div>
            <div class="nav-item" id="quick-record-btn">
                <div class="nav-icon" style="font-size: 24px;">➕</div>
                <div>记账</div>
            </div>
            <div class="nav-item active" data-page="details.html">
                <div class="nav-icon">📝</div>
                <div>明细</div>
            </div>
            <div class="nav-item" data-page="user.html">
                <div class="nav-icon">👤</div>
                <div>我的</div>
            </div>
        </div>
    </div>
    
    <!-- 一句话记账弹窗 -->
    <div class="quick-record" id="quick-record-modal">
        <div class="quick-record-header">
            <div class="quick-record-title">一句话记账</div>
            <div class="close-btn" id="close-quick-record">✕</div>
        </div>
        <div class="voice-input">
            <input type="text" class="voice-input-field" id="voice-input-field" placeholder="例如：今天午餐花了30元">
            <div class="mic-btn" id="mic-btn">🎤</div>
        </div>
        
        <!-- 截图上传区域 -->
        <div class="image-upload-section">
            <div class="upload-divider">
                <span>或</span>
            </div>
            <div class="image-upload-area" id="image-upload-area">
                <input type="file" id="image-input" accept="image/*" style="display: none;">
                <div class="upload-placeholder" id="upload-placeholder">
                    <div class="upload-icon">📷</div>
                    <div class="upload-text">点击上传截图</div>
                    <div class="upload-hint">支持JPG、PNG格式</div>
                </div>
                <div class="image-preview" id="image-preview" style="display: none;">
                    <img id="preview-img" src="" alt="预览图片">
                    <div class="image-actions">
                        <button class="btn-icon" id="delete-image" title="删除图片">🗑️</button>
                        <button class="btn-icon" id="reselect-image" title="重新选择">🔄</button>
                    </div>
                </div>
            </div>
        </div>
        
        <button class="btn btn-primary" id="submit-quick-record">识别并记账</button>
    </div>
    
    <!-- 确认删除弹窗 -->
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">确认删除</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    确定要删除这条账单记录吗？此操作不可恢复。
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" id="confirm-delete">确认删除</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 提示弹窗 -->
    <div class="modal fade" id="alertModal" tabindex="-1" aria-labelledby="alertModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="alertModalLabel">提示</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="alertModalBody">
                    <!-- 动态内容 -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">确定</button>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 解析URL参数
            const urlParams = new URLSearchParams(window.location.search);
            const billId = urlParams.get('id');
            const hasImage = urlParams.get('hasImage') === 'true';
            const recorder = urlParams.get('recorder') || '默认用户';
            
            // 如果有图片参数，显示图片识别卡片
            if (hasImage) {
                document.getElementById('image-recognition-card').style.display = 'block';
                document.getElementById('receipt-image').src = 'https://via.placeholder.com/300x200/f0f5ff/667eea?text=收据图片';
            }
            
            // 加载账单详情
            loadBillDetails(billId, recorder);
            
            // 绑定事件
            bindEvents();
        });
        
        // 加载账单详情
        function loadBillDetails(billId, recorder) {
            // 这里应该是从API获取账单详情的代码
            // 现在使用模拟数据
            const billDetails = {
                id: billId || '12345',
                type: 'expense',
                category: '餐饮',
                subcategory: '三餐',
                amount: 45.00,
                date: '2024-05-28',
                time: '12:30',
                book: '默认账本',
                payment: '支付宝',
                note: '午餐费用',
                aiInput: '今天午餐花了45元',
                recorder: recorder || '默认用户' // 使用传入的记账人参数
            };
            
            // 更新UI
            updateBillUI(billDetails);
        }
        
        // 更新账单UI
        function updateBillUI(bill) {
            // 设置分类图标
            const categoryIcons = {
                '餐饮': '🍔',
                '交通': '🚇',
                '购物': '🛒',
                '住房': '🏠',
                '通讯': '📱',
                '医疗': '💊',
                '娱乐': '🎮',
                '教育': '📚',
                '工资': '💰',
                '兼职': '💼',
                '理财': '📈',
                '礼金': '🧧'
            };
            
            document.getElementById('category-icon').textContent = categoryIcons[bill.category] || '📝';
            document.getElementById('bill-category').textContent = bill.category;
            document.getElementById('bill-subcategory').textContent = bill.subcategory;
            
            // 设置金额和类型
            const amountElement = document.getElementById('bill-amount');
            if (bill.type === 'expense') {
                amountElement.textContent = `-${bill.amount.toFixed(2)}`;
                amountElement.className = 'bill-amount expense';
            } else {
                amountElement.textContent = `+${bill.amount.toFixed(2)}`;
                amountElement.className = 'bill-amount income';
            }
            
            // 设置其他信息
            document.getElementById('bill-time').textContent = `${bill.date} ${bill.time}`;
            document.getElementById('bill-book').textContent = bill.book;
            document.getElementById('bill-payment').textContent = bill.payment;
            document.getElementById('bill-note').textContent = bill.note;
            document.getElementById('bill-recorder').textContent = bill.recorder || '默认用户';
            
            // 设置记账人头像（这里使用首字母作为头像文本）
            const firstLetter = bill.recorder ? bill.recorder.charAt(0) : '用';
            document.getElementById('recorder-avatar').src = `https://via.placeholder.com/30x30/667eea/ffffff?text=${firstLetter}`;
            
            // 设置AI输入内容
            document.getElementById('voice-input-text').textContent = bill.aiInput;
        }
        
        // 绑定事件
        function bindEvents() {
            // 编辑按钮点击事件
            document.getElementById('edit-bill-btn').addEventListener('click', function() {
                // 获取当前账单ID
                const urlParams = new URLSearchParams(window.location.search);
                const billId = urlParams.get('id') || '12345';
                
                // 跳转到编辑页面
                const billType = document.getElementById('bill-amount').classList.contains('expense') ? 'expense' : 'income';
                const editPage = billType === 'expense' ? 'expense.html' : 'income.html';
                window.location.href = `${editPage}?edit=true&id=${billId}`;
            });
            
            // 删除按钮点击事件
            document.getElementById('delete-bill-btn').addEventListener('click', function() {
                // 显示确认删除弹窗
                const deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));
                deleteModal.show();
            });
            
            // 确认删除按钮点击事件
            document.getElementById('confirm-delete').addEventListener('click', function() {
                // 获取当前账单ID
                const urlParams = new URLSearchParams(window.location.search);
                const billId = urlParams.get('id') || '12345';
                
                // 这里应该是实际的删除逻辑，现在只是模拟
                showAlert('账单已成功删除');
                
                // 关闭弹窗
                const deleteModal = bootstrap.Modal.getInstance(document.getElementById('deleteModal'));
                deleteModal.hide();
                
                // 返回明细页面
                setTimeout(() => {
                    window.location.href = 'details.html';
                }, 1500);
            });
            
            // 底部导航栏点击事件
            document.querySelectorAll('.nav-item').forEach(item => {
                if (item.id !== 'quick-record-btn') {
                    item.addEventListener('click', function() {
                        const page = this.getAttribute('data-page');
                        if (page) {
                            window.location.href = page;
                        }
                    });
                }
            });
            
            // 快速记账按钮点击事件
            document.getElementById('quick-record-btn').addEventListener('click', function() {
                document.getElementById('quick-record-modal').classList.add('show');
            });
            
            // 关闭快速记账弹窗
            document.getElementById('close-quick-record').addEventListener('click', function() {
                document.getElementById('quick-record-modal').classList.remove('show');
            });
            
            // 语音输入按钮点击事件
            document.getElementById('mic-btn').addEventListener('click', function() {
                // 模拟语音输入
                const voiceInputField = document.getElementById('voice-input-field');
                voiceInputField.value = '今天午餐花了45元';
                
                // 显示语音输入中的动画
                this.textContent = '🔊';
                setTimeout(() => {
                    this.textContent = '🎤';
                }, 2000);
            });
            
            // 图片上传区域点击事件
            document.getElementById('image-upload-area').addEventListener('click', function() {
                document.getElementById('image-input').click();
            });
            
            // 图片选择事件
            document.getElementById('image-input').addEventListener('change', function(e) {
                const file = e.target.files[0];
                if (file) {
                    // 检查文件类型
                    if (!file.type.match('image.*')) {
                        showAlert('请选择图片文件');
                        return;
                    }
                    
                    // 检查文件大小（限制为5MB）
                    if (file.size > 5 * 1024 * 1024) {
                        showAlert('图片大小不能超过5MB');
                        return;
                    }
                    
                    // 显示预览
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        document.getElementById('preview-img').src = e.target.result;
                        document.getElementById('upload-placeholder').style.display = 'none';
                        document.getElementById('image-preview').style.display = 'block';
                    };
                    reader.readAsDataURL(file);
                }
            });
            
            // 删除图片按钮点击事件
            document.getElementById('delete-image').addEventListener('click', function(e) {
                e.stopPropagation();
                document.getElementById('image-input').value = '';
                document.getElementById('upload-placeholder').style.display = 'block';
                document.getElementById('image-preview').style.display = 'none';
            });
            
            // 重新选择图片按钮点击事件
            document.getElementById('reselect-image').addEventListener('click', function(e) {
                e.stopPropagation();
                document.getElementById('image-input').click();
            });
            
            // 提交一句话记账
            document.getElementById('submit-quick-record').addEventListener('click', function() {
                const voiceInput = document.getElementById('voice-input-field').value.trim();
                const hasImage = document.getElementById('image-preview').style.display !== 'none';
                
                if (!voiceInput && !hasImage) {
                    showAlert('请输入一句话记账内容或上传图片');
                    return;
                }
                
                // 模拟处理中
                this.textContent = '识别中...';
                this.disabled = true;
                
                setTimeout(() => {
                    // 模拟识别结果
                    let recognizedType, recognizedAmount, recognizedCategory;
                    
                    if (voiceInput) {
                        // 模拟语音识别结果
                        if (voiceInput.includes('收入') || voiceInput.includes('工资')) {
                            recognizedType = 'income';
                            recognizedAmount = '3000';
                            recognizedCategory = '工资';
                        } else {
                            recognizedType = 'expense';
                            recognizedAmount = voiceInput.match(/\d+/) ? voiceInput.match(/\d+/)[0] : '50';
                            recognizedCategory = voiceInput.includes('餐') || voiceInput.includes('吃') ? '餐饮' : '购物';
                        }
                    } else if (hasImage) {
                        // 模拟图片识别结果
                        recognizedType = 'expense';
                        recognizedAmount = '68';
                        recognizedCategory = '购物';
                    }
                    
                    // 关闭弹窗
                    document.getElementById('quick-record-modal').classList.remove('show');
                    
                    // 重置按钮状态
                    this.textContent = '识别并记账';
                    this.disabled = false;
                    
                    // 跳转到相应的记账页面
                    const recordPage = recognizedType === 'income' ? 'income.html' : 'expense.html';
                    window.location.href = `${recordPage}?amount=${recognizedAmount}&category=${recognizedCategory}&hasImage=${hasImage}`;
                }, 2000);
            });
        }
        
        // 显示提示弹窗
        function showAlert(message) {
            document.getElementById('alertModalBody').textContent = message;
            const alertModal = new bootstrap.Modal(document.getElementById('alertModal'));
            alertModal.show();
        }
    </script>
</body>
</html>